<template>
  <Menu mode="horizontal" theme="primary" active-name="1">
    <div class="layout-logo">车联网远程服务系统</div>
    <div class="layout-nav">
      <MenuItem name="1" to="/home">
        <Icon type="md-car" />车辆监控
      </MenuItem>
      <Submenu name="2">
        <template slot="title">
          <Icon type="ios-stats" />统计分析
        </template>
        <MenuGroup title="车辆">
          <MenuItem name="2-1">里程统计</MenuItem>
          <MenuItem name="2-2">行驶记录</MenuItem>
          <MenuItem name="2-3">超速统计</MenuItem>
        </MenuGroup>
        <MenuGroup title="警情">
          <MenuItem name="2-4">警情统计</MenuItem>
          <MenuItem name="2-5">流失用户</MenuItem>
        </MenuGroup>
      </Submenu>
      <Submenu name="3">
        <template slot="title">
          <Icon type="md-cog" />系统设置
        </template>
        <MenuGroup title="警情">
          <MenuItem name="3-1" to="/home/alarmSetting">警情设置</MenuItem>
        </MenuGroup>
        <MenuGroup title="车辆">
          <MenuItem name="3-2" to="/home/bindCar">绑定车辆</MenuItem>
          <MenuItem name="3-3" to="/home/carGroup">车辆组管理</MenuItem>
        </MenuGroup>
        <MenuGroup title="其他">
          <MenuItem name="3-5" to="/home/userRole">角色管理</MenuItem>
          <MenuItem name="3-4" to="/home/acountSetting">账户设置</MenuItem>
        </MenuGroup>
      </Submenu>

      <MenuItem name="4">
        <Icon type="md-map" />电子围栏
      </MenuItem>
      <MenuItem name="5">
        <Icon type="ios-paper-plane" />警情服务
      </MenuItem>
      <span @click="confirm" class="logout-box">
        <a>
          <Icon type="md-exit" />退出
        </a>
      </span>
    </div>
  </Menu>
</template>

<script>
export default {
  name: "Cmenu",
  methods:{
          confirm() {
      this.$Modal.confirm({
        title: "退出",
        content: "<p>确认退出登录</p>",
        onOk: () => {
          this.$router.push("login");
        },
        onCancel: () => {
          this.$Message.info("Clicked cancel");
        },
      });
    }
  }

};
</script>

<style scoped>
.layout {
  border: 1px solid #d7dde4;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-logo {
  color: white;
  font-size: 1.5em;
  height: 30px;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 0;
  left: 20px;
}
.layout-nav {
  float: right;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-footer-center {
  text-align: center;
}
.layout-header {
  padding: 0;
  border: none;
  background-color: #2d8cf0;
}
.logout-box {
  color: white;
  float: right;
}
a:hover,
a:visited,
a:link,
a:active,
a {
  text-decoration: none;
  color: white;
}
.diliver {
  display: block;
  height: 1px;
  width: 100%;
  min-width: 100%;
  margin: 10px 0;
  clear: both;
  border-top: #d7dde4 1px solid;
}
</style>